<template>
  <div
    class="play"
    @scroll="scrollGet($event)"
  >
    <Hometop></Hometop>
    <video
      src="../../static/mp4/hsk.mp4"
      controls
      height="250vw"
      width="100%"
    ></video>
    <div class="erha_detail">
      <img
        src="../../static/images/play-img.png"
        alt=""
      >
      <div>
        <div class="box">
          <div class="left">
            <h2>Re：二哈怒怼</h2>
            <p><span class="huzi"><i class="iconfont icon-bofangliang"></i> 4155.2万 </span><span class="huzi"><i
                  class="iconfont icon-love-o"
                  style="font-size:3.333vw;"
                ></i> 817.6万 </span></p>
          </div>
          <div class="right">
            <p>9.8分</p>
            <span class="huzi">3.5万人</span>
          </div>
        </div>
        <p class="huzi12">我一定会拯救你。<br>在打倒了魔女教罪司教[怠惰]担当----...</p>
      </div>

    </div>
    <div class="santu">
      <i
        class="iconfont icon-fenxiang"
        @click="showShare = true"
      ></i>分享
      <van-icon
        :name="iconame"
        @click="aiClick"
        ref="airef"
        :color="color"
        size="5.2vw"
      />追番
      <i class="iconfont icon-huancun"></i>缓存
      <div @click="commentClick">
        <van-icon
          name="fire"
          :color="comtcolor"
          size="4.5vw"
        />我要评论
      </div>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
    <div class="line"></div>
    <div
      class="comment"
      v-if="commentfalt"
    >
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入宁的评论"
          @search="onSearch"
          @cancel="onCancel"
          background="green"
          shape="round"
        >
          <template #label>
            <div></div>
          </template>
          <template #left-icon>
            <div></div>
          </template>
          <template #action>
            <span
              style="color:red;"
              @click="onCancel"
            >取消</span>
          </template>
        </van-search>
      </form>
    </div>
    <Fangtop></Fangtop>
    <Comment :actives="active"></Comment>
  </div>
</template>
<script>
import Hometop from '../../components/common/Hometop'
import Comment from '../../components/common/Comment'
import Fangtop from '../../components/common/fangTop'
import { Toast } from 'vant'
export default {
  data: () => ({
    active: 0,
    icoflat: false,
    iconame: 'like-o',
    color: '',
    comtcolor: '',
    showShare: false,
    commentfalt: false,
    value: '',
    options: [
      [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' }
      ],
      [
        { name: '二维码', icon: 'qrcode' }
      ]
    ]
  }),
  methods: {
    aiClick () {
      this.icoflat = !this.icoflat
      if (this.icoflat) {
        this.iconame = 'like'
        this.color = 'red'
      } else {
        this.iconame = 'like-o'
        this.color = ''
      }
    },
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
    commentClick () {
      this.commentfalt = !this.commentfalt
      this.actives = 1
      if (this.commentfalt) {
        this.comtcolor = 'red'
      } else {
        this.comtcolor = ''
      }
    },
    async onSearch () {
      Toast('评论成功')
      // const myid = this.$route.query.id
      // const data = {
      //   id: window.sessionStorage.getItem('id'),
      //   comment_date: '3-12',
      //   comment_content: this.value,
      //   userinfo: { name: 'hssss' }
      // }
      // console.log(myid)
      // console.log(window.sessionStorage.getItem('id'))
      // const id = window.sessionStorage.getItem('id')
      // await this.$http.postComments(id, data)
    },
    onCancel () {
      Toast('取消评论')
      this.commentfalt = !this.commentfalt
    },
    scrollGet (e) {
      console.log(e.srcElement.scrollTop, e.target.scrollTop)
    }
  },
  components: {
    Hometop,
    Comment,
    Fangtop
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/icon/iconfont.css';
.play {
  .erha_detail {
    display: flex;
    padding: 2vw 3vw;
    > img {
      margin-right: 4vw;
    }
    .huzi12 {
      color: #999;
      font-size: 3.333vw;
    }
    .box {
      display: flex;
      justify-content: space-between;
      width: 66vw;
      padding: 1.389vw;
      .left {
        h2 {
          font-weight: normal;
          font-size: 4.444vw;
          margin-bottom: 2.222vw;
        }
      }
      .right {
        line-height: 5.556vw;
        p {
          font-size: 4.444vw;
          color: orange;
          font-weight: bold;
        }
      }
    }
    > div {
      > p {
        margin-top: 2.222vw;
        line-height: 5.556vw;
      }
    }
    .huzi {
      color: #777;
      font-size: 3.333vw;
    }
  }
  .santu {
    padding: 3vw;
    width: 64.667vw;
    display: flex;
    justify-content: space-between;
    ::v-deep.van-share-sheet__options {
      justify-content: space-between;
      padding: 4.444vw 2.222vw;
    }
  }
  .line {
    border-bottom: 0.278vw solid #666;
    margin: 0 3vw;
  }
}
</style>
